<template>
  <el-container style="height:640px;width:100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <!-- K8s配置文件选择器 -->
      <div style="padding: 10px;">
        <el-tooltip content="选择Kubernetes配置文件" placement="right">
          <el-button type="primary" size="small" @click="selectConfigFile" style="width: 100%; margin-bottom: 10px;">
            选择配置文件
          </el-button>
        </el-tooltip>
        <div v-if="currentConfigPath" style="font-size: 12px; word-break: break-all; margin-bottom: 10px;">
          当前配置: 
          <el-tooltip :content="'点击复制: ' + currentConfigPath" placement="right">
            <span @click="copyConfigPath" style="cursor: pointer; color: #409EFF;">{{ displayConfigPath }}</span>
          </el-tooltip>
        </div>
      </div>
      <el-menu default-active="1" :collapse="false">
        <el-menu-item index="1">
          <template #title>
            <span><a href="#/NodeList">Nodes</a></span>
          </template>
        </el-menu-item>

        <el-sub-menu index="2">
          <template #title>
            <span>Workloads</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1"><a href="#/PodList">Pods</a></el-menu-item>
            <el-menu-item index="2-2"><a href="#/DeploymentList">Deployments</a></el-menu-item>
            <el-menu-item index="2-3"><a href="#/DaemonSetList">DaemonSets</a></el-menu-item>
            <el-menu-item index="2-4"><a href="#/StatefulSetList">StatefulSets</a></el-menu-item>
            <el-menu-item index="2-5"><a href="#/JobList">Jobs</a></el-menu-item>
            <el-menu-item index="2-6"><a href="#/CronJobList">CronJobs</a></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <span>Config</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1"><a href="#/ConfigmapList">ConfigMaps</a></el-menu-item>
            <el-menu-item index="3-2"><a href="#/SecretList">Secrets</a></el-menu-item>
            <el-menu-item index="3-3"><a href="#/ResourceQuotaList">Resource Quotas</a></el-menu-item>
            <el-menu-item index="3-4"><a href="#/LimitRangeList">Limit Ranges</a></el-menu-item>
            <el-menu-item index="3-5"><a href="#/HorizontalPodAutoscalerList">HPA</a></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>


        <el-sub-menu index="4">
          <template #title>
            <span>Network</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1"><a href="#/ServiceList">Services</a></el-menu-item>
            <el-menu-item index="4-2"><a href="#/IngressList">Ingresses</a></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>



        <el-sub-menu index="5">
          <template #title>
            <span>Storage</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1"><a href="#/PersistentVolumeClaimList">PersistentVolumeClaims</a></el-menu-item>
            <el-menu-item index="5-2"><a href="#/PersistentVolumeList">PersistentVolumes</a></el-menu-item>
            <el-menu-item index="5-3"><a href="#/StorageClassList">Storage Classes</a></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-menu-item index="6">
          <template #title>
            <span><a href="#/EventList">Events</a></span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
          <router-view/>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'HomePage',
  props: {
  },
  data() {
    return {
      currentConfigPath: '',
      displayConfigPath: ''
    }
  },
  async mounted() {
    // 获取当前配置文件路径
    try {
      this.currentConfigPath = await window.k8s_GetCurrentConfigPath();
      this.displayConfigPath = this.formatPath(this.currentConfigPath);
    } catch (error) {
      console.error('获取配置文件路径失败:', error);
    }
  },
  methods: {
    // 选择配置文件
    async selectConfigFile() {
      try {
        console.log('开始选择配置文件...');
        
        // 使用后端提供的文件对话框函数
        const filePath = await window.k8s_OpenFileDialog();
        
        // 检查是否取消了选择
        if (!filePath) {
          console.log('用户取消了文件选择');
          return;
        }
        
        console.log('选择的文件路径:', filePath);
        
        try {
          console.log('正在调用后端函数设置配置文件路径...');
          // 调用后端函数设置新的配置文件路径
          await window.k8s_SetConfigPath(filePath);
          console.log('配置文件路径设置成功，正在获取当前路径...');
          
          this.currentConfigPath = await window.k8s_GetCurrentConfigPath();
          this.displayConfigPath = this.formatPath(this.currentConfigPath);
          
          console.log('配置文件已更新为:', this.currentConfigPath);
          
          // 显示成功消息
          this.$message({
            message: '配置文件已更新',
            type: 'success'
          });
          
          // 刷新页面以应用新配置
          setTimeout(() => {
            console.log('正在刷新页面以应用新配置...');
            window.location.reload();
          }, 1000);
        } catch (error) {
          console.error('更新配置文件失败:', error);
          // 显示错误消息
          this.$message({
            message: '更新配置文件失败: ' + error,
            type: 'error'
          });
        }
      } catch (error) {
        console.error('选择文件失败:', error);
        this.$message({
          message: '选择文件失败: ' + error,
          type: 'error'
        });
      }
    },
    
    // 格式化路径，显示最后部分
    formatPath(path) {
      if (!path) return '';
      // 如果路径长度小于30，直接返回
      if (path.length < 30) return path;
      
      // 否则显示路径的最后部分
      const parts = path.split(/[\/\\]/);
      const lastParts = parts.slice(-2).join('/'); // 显示最后两部分
      return '...' + lastParts;
    },
    
    // 复制配置文件路径到剪贴板
    copyConfigPath() {
      if (!this.currentConfigPath) return;
      
      // 使用navigator.clipboard API复制文本
      navigator.clipboard.writeText(this.currentConfigPath).then(() => {
        this.$message({
          message: '配置文件路径已复制到剪贴板',
          type: 'success'
        });
      }).catch(err => {
        console.error('复制失败:', err);
        this.$message({
          message: '复制失败: ' + err,
          type: 'error'
        });
      });
    }
  }
}
</script>
